<template>
  <div>
    <el-upload
      v-loading="loading"
      class="avatar-uploader"
      :action="action"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :on-error="handleAvatarError"
      :before-upload="beforeAvatarUpload"
      :disabled="disabled"
      accept="image/*"
    >
      <img-preview
        :data="(imageObj && imageObj.length && imageObj[0].url) || undefined"
        :disabled="disabled"
        @change-value="handleDelete"
      />
    </el-upload>
  </div>
</template>
<script>
import { getZfsUploadTrans } from '../../utils/common-methods'
import imgPreview from '@/components/Zmids/imgPreview/imgPreview.vue'

export default {
  name: 'ImageUpload',
  components: { imgPreview },
  // model: {
  //   prop: 'value',
  //   event: 'changeValue'
  // },
  props: {
    action: {
      type: String,
      default: ''
    },
    modelValue: {
      type: [Array, String],
      default: () => []
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      imageObj: [
        //   {
        //   fileName: "",
        //   url: "",
        //   storageType: "", // 存储方式
        //   type: "", // 图片类型
        // }
      ],
      showPreview: false,
      menu: false,
      previewList: [],
      loading: false
    }
  },
  watch: {
    modelValue: {
      handler(newVal) {
        if (newVal) {
          if (newVal instanceof Array) {
            this.imageObj = newVal
          } else {
            this.imageObj = []
          }
        }
      },
      immediate: true
    },
    imageObj: {
      handler(newVal) {
        if (newVal) {
          this.$emit('update:modelValue', newVal)
        }
      },
      deep: true
    },
    action: {
      handler(newVal) {
        if (newVal) {
        } else {
        }
      }
    }
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.loading = false
      const { data } = res
      const img = getZfsUploadTrans(data)
      this.imageObj.push(img)
      // this.imageUrl = URL.createObjectURL(file.raw);
    },
    handleAvatarError(err, file, fileList) {
      this.loading = false
      this.msgError(err)
    },
    beforeAvatarUpload(file) {
      this.loading = true
      // const isJPG = file.type === "image/jpeg";
      // const isLt2M = file.size / 1024 / 1024 < 2;

      // if (!isJPG) {
      //   this.$message.error("上传头像图片只能是 JPG 格式!");
      // }
      // if (!isLt2M) {
      //   this.$message.error("上传头像图片大小不能超过 2MB!");
      // }
      return true
    },
    handleDelete() {
      this.imageObj = []
    }
  }
}
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.upload-actions {
  position: absolute;
  z-index: 2;
  top: 0;
  width: 178px;
  height: 178px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  background-color: #8c939d;
  opacity: 0.8;
}

.action-icon {
  font-size: 20px;
  color: #fff;
}
</style>
